<!--
描述：留言修改
开发人：yyp
开发日期：2019/05/28
-->
<template lang="pug">
  kalix-dialog.user-add(bizKey="message" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL")
    div.el-form(slot="dialogFormSlot" style=" width:60%;margin:auto;")
      el-input(v-model="formModel.uid" type="hidden")
      <!--el-form-item(label="院系" prop="did" v-bind:rules="rules.did" v-bind:label-width="labelWidth")-->
        <!--el-cascader.long(v-model="didCascader" placeholder="请选择院系信息" :options="options" filterable @change="getDep" :clearable="true" v-bind:show-all-levels="false" change-on-select)-->
      <!--el-form-item(label="课程" prop="cid" v-bind:rules="rules.cid" v-bind:label-width="labelWidth")-->
        <!--el-select(v-model="cname" placeholder="请选择课程" @change="getCid")-->
          <!--el-option(v-for="item in items" :key="item.value" :label="item.label" :value="item.value" )-->
      el-form-item.short(label="课程" prop="cname" v-bind:label-width="labelWidth" v-bind:rules="rules.cname")
        el-select(v-model="formModel.cid" placeholder="请选择" @change="getCid")
          el-option(v-for="item in optionss" v-bind:key="item.id" v-bind:label="item.name" v-bind:value="item.id")
      el-form-item(label="评论内容" prop="content" label-width="120px" v-bind:rules="rules.content")
        el-input(v-model="formModel.content" style="width:80%")
      el-form-item(label="评分" prop="score" label-width="120px" v-bind:rules="rules.score" )
        el-input(v-model="formModel.score" style="width:80%" )
</template>

<script type="text/ecmascript-6">
  import FormModel from './model'
  import {MessageURL, DepartmentsURL, TrainingVideosUrl} from '../../config.toml'

  export default {
    name: 'messageEdit',
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        rules: {
          content: [{required: true, message: '请输入修改的评论内容', trigger: 'blur'}],
          score: [{required: true, message: '请输入修改的评分', trigger: 'blur'}]
        },
        targetURL: MessageURL,
        labelWidth: '110px',
        items: [],
        options: [],
        didCascader: [],
        optionss: [],
        cname: null
      }
    },
    mounted() {
      this.getDepCascader() // 获取院系信息并以级联形式显示
      this.getCname()
    },
    methods: {
      init(dialogOption) {
        console.log('---------dialogOption------------', dialogOption)
        this.axios.request({
          method: 'GET',
          url: DepartmentsURL + '/getEchoByDid', // 通过uri获取级联回显的数据
          params: {
            did: this.formModel.did
          }
        }).then(res => {
          console.log('res===============', res.data.tag)
          if (res.data.tag.length > 0) {
            this.didCascader = res.data.tag.split(',')
            console.log('this.didCascader==========', this.didCascader)
          }
        })
        delete this.formModel.did
        this.cname = this.formModel.cname
        delete this.formModel.cname
      },
      // getCid() { // 给cid赋值
      //   this.formModel.cid = this.cname
      //   console.log('this.formModel.cid====', this.formModel.cid)
      // },
      getCname() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mooc/courses/getAllCourse'
        }).then(res => {
          this.optionss = res.data.data
        })
      },
      getCid(val) {
        let obj = {}
        obj = this.optionss.find((item) => {
          return item.id === val
        })
        this.formModel.cname = obj.name
      },
      getDepCascader() { // 获取院系信息并以级联形式显示
        console.log('getDepCascader========================')
        this.axios.request({
          method: 'GET',
          url: DepartmentsURL + '/getDepCascader'
        }).then(res => {
          console.log('getDepCascader==============', res.data.data)
          this.options = res.data.data
        })
      },
      getDep(val) { // 通过级联获取数据后转成字符串
        let ddid = val.toString().substring(val.toString().lastIndexOf(',') + 1, val.toString().length)
        console.log('ddid========================', ddid)
        this.axios.request({
          method: 'GET',
          url: TrainingVideosUrl + '/getDDidBySelect',
          params: {
            did: ddid
          }
        }).then(res => {
          console.log('getDDidBySelect==============', res.data.data)
          this.items = res.data.data
        })
      }
    }
  }
</script>

<style scoped>

</style>
